<template>
	<view class="page-content">
		<view class="page-banner">
			<swiper class="swiper" circular @change="swiperChange"  :indicator-dots="false" :autoplay="false" :interval="2000">
				<swiper-item class="swiper-item " v-for="(item,index) in card_info.images" :key="index">
					<image :src="`https://quanyuzhou.weimoft.com/${item}`" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<view class="toBack" @click="handleToback">
				<image src="https://quanyuzhou.weimoft.com/image/back.png" mode="widthFix"></image>
			</view>
			<view class="dots">
				{{swipercurrent}}/{{card_info.images.length}}
			</view>
		</view>
		<view class="page-main">
			<view class="page-text">
				<view class="main-content">
					<view class="text">
						<image src="https://quanyuzhou.weimoft.com/image/icon-1.png" mode="widthFix"></image>
						{{card_info.name}}
						<image src="https://quanyuzhou.weimoft.com/image/icon-1.png" mode="widthFix"></image>
					</view>
					<view class="main-tables">
						<rich-text :nodes="card_info.introduce"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="page-submit">
			<view class="btn" @click="toCategory" v-if="is_can">
				{{card_info.is_booking==1?"立即预约":"立即激活"}}
			</view>
			<view class="btn" style="background-color: #9E9E9E;" v-else>
				{{card_info.is_booking==1?"立即预约":"立即激活"}}
			</view>
		</view>
		<ns-login ref="login"></ns-login>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				card_id: null,
				card_info: {
					id: 3,
					images: [],
					introduce: "",
					name: "季度卡",
					is_booking: 0
				},
				swipercurrent:1,
				token: "",
				type: 0,
				is_scode: null,
				is_can: true,
				my_card: {
					name: "",
					mobile: ""

				}
			}
		},
		onLoad(options) {
			this.card_id = options.card_id;
			this.is_scode = options.is_scode == 'null' ? null : options.is_scode;
			let is_tokne = uni.getStorageSync("token");

		},
		onShow() {},
		mounted() {
			this.getCardDetail()
		},
		methods: {
			swiperChange(e){
				console.log(e)
				this.swipercurrent=e.detail.current+1
			},
			toCategory() {

				let _this = this;
				let type = this.card_info.is_booking == 0 ? 1 : 2
				uni.navigateTo({
					url: `/pages_service/service/index/apply/apply?type=${type}&card_id=${_this.card_id}&name=${this.my_card.name}&mobile=${this.my_card.mobile}`
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			getCardDetail() {
				let _this = this;
				this.$api.sendRequest({
					url: `/bookingcard/api/card/category_detail?id=${_this.card_id}&card_id=${_this.is_scode}`,
					success: res => {
						if (res.code == 0) {
							let data = res.data;
							let htmlSp = data.content == null ? '' : data.content;
							htmlSp = htmlSp.replace(/<img /g, '<img style="max-width:100%; height:auto; " ');
							data.introduce = htmlSp
							_this.card_info = data;
							let is_activation = data.is_activation;
							let is_booking = data.is_booking;
							if (is_booking == 0) {
								if (is_activation == 1 && _this.is_scode != null) {
									_this.is_can = true
								} else if (is_activation == 0 && _this.is_scode != null) {
									_this.is_can = false
								} else {
									_this.is_can = true
								}
							} else {
								_this.is_can = true
							}
							_this.getmyCard()
						} else {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if (res.message.indexOf('尚未登录') != -1) {
								var url =
									`/pages_service/service/index/legalinterest?is_scode=${_this.is_scode}&card_id=${_this.card_id}`
								this.$refs.login.open(url);
							}
						}

					}
				})
			},
			getmyCard() {
				let _this = this;
				this.$api.sendRequest({
					url: "/bookingcard/api/card/my_card",
					success(res) {
						let data = res.data;
						let is_card = data.is_card;
						if (is_card != 0) {
							_this.my_card = data;
						}
						console.log(res)
					}
				})
			},
			handleToback(){
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="less">
	.page-content {
		padding-bottom: 45rpx;
	}

	.page-banner {
		position: relative;

		.toBack {
			position: fixed;
			left: 32rpx;
			top: 56px;
			z-index: 99999;

			image {
				width: 17rpx;
			}
		}

		.dots {
			position: absolute;
			right: 32rpx;
			bottom: 56rpx;
			width: 90rpx;
			height: 48rpx;
			background: #000000;
			border-radius: 24rpx;
			opacity: 0.3;
			text-align: center;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.swiper {
		height: 276px !important;
	}

	.swiper-item {
		image {
			width: 100%;

		}
	}

	rich-text img {
		max-width: 100%;
		height: auto;
	}

	.page-main {
		padding-bottom: 55px;
		position: relative;

		.page-text {
			background: #C0EDEC;
			padding: 68rpx 24rpx;
			position: relative;
			z-index: 111;
			top: -40rpx;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}

		.main-content {
			border-radius: 21px;
			background: url(https://quanyuzhou.weimoft.com/image/leg_back.png) no-repeat;
			background-size: 100% 100%;
			background-position: 0 -3px;
			padding-bottom: 28rpx;

			.text {
				padding: 19px 0 13px 0;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 60rpx;

				image {
					margin: 0 14rpx;
					width: 16px;

				}

			}

			.main-tables {
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 20px;

				&>view {
					border: 1rpx solid #27CEC8;
				}

				.tab-theade {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						height: 100rpx;
						border: 1rpx solid #27CEC8;
						font-family: PingFangSC, PingFang SC;
						font-size: 32rpx;
						color: #333333;
						font-weight: 600;
						text-align: center;
						line-height: 38rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}


				.tab-tbody {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						min-height: 100rpx;
						font-family: PingFangSC, PingFang SC;
						border: 1rpx solid #27CEC8;
						font-size: 20rpx;
						color: #333333;
						line-height: 28rpx;
						padding: 12rpx;
						text-align: center;

						&:first-child {
							font-size: 32rpx;
							color: #333333;
							font-weight: 600;
						}
					}
				}

				.tab-tbody1 .item {
					height: 270rpx;
				}
			}
		}
	}

	.page-submit {
		padding: 0 24rpx;
		position: fixed;
		width: 100%;
		left: 0;
		box-sizing: border-box;
		bottom: 36px;
		z-index: 9999;
		box-shadow: 0 0px 5px #afafaf4a;
		background: #fff;
		height: 156rpx;
		bottom: 0;
		padding-top: 16rpx;

		.btn {
			height: 84rpx;
			background: #27CEC8;
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;

		}
	}
</style>